<template>
  <div>
    <h2>info: {{ info.name }} --- {{ info.age }} --- {{ info.height }}</h2>
    <h2>info:{{ name }} {{ age }}</h2>

    <button @click="info.age++">修改age</button>
    <button @click="age++">修改age</button>
    <button @click="height++">修改height</button>
  </div>
</template>

<script>
import { reactive, toRef, toRefs, ref } from 'vue'

export default {
  setup() {
    const info = reactive({
      name: '张三',
      age: 18,
      height: 12,
    })

    // 将一个响应式对象 info 使用 toRefs 函数进行转换得到 refs(仍然会保持响应式)
    const { name, age } = toRefs(info)

    // 使用 toRef 函数将 data 对象中的 message 属性转换为一个单独的 ref 对象 height
    const height = toRef(info, 'height')

    return {
      height,
      info,
      name,
      age,
    }
  },
}
</script>

<style scoped></style>
